import React, { Component } from 'react';
import { MoreOutline, LeftOutline, EnvironmentOutline } from 'antd-mobile-icons'
import { Collapse, Empty, Toast, Dialog } from 'antd-mobile'
import '../style/Index/Order/order.css'
import services from '../api/interface'
class Order extends Component {
    state = {
        ordList: [], mainlist: [], isshow: 'none',num:null,originprice:null,on:'block'
    }
    onAddress() {
        this.props.history.push('/address')
    }
    onClick() {
        this.props.history.push('/index/shopcar')
    }
    //跳转详情
    onClickxiangqin(item) {
        this.props.history.push({ pathname: '/detail', state: { id: item.proid } })
    }
    //订单支付
    async onpay() {
        // 支付删除购物车选中数据
        Dialog.confirm({
            content: '是否确认支付',
            onConfirm: async () => {
                Toast.show({
                    icon: 'success',
                    content: '支付成功！',
                    position: 'middle',
                })
                var ree = await services.order.order_deleteCartItem({ token: localStorage.getItem('token'), userid: localStorage.getItem('userid') })
                this.setState({
                    ordList: ree.data.data,
                    isshow: 'block',
                    on:'none'
                })
            }

        })


       
    }
    //合计
    onClickheji() {
        this.setState({
            isshow: 'block',
        })
    }
    async componentDidMount() {
        var res = await services.cart.cart_list({ token: localStorage.getItem('token'), userid: localStorage.getItem('userid') })
        this.setState({
            ordList: res.data.data,
            num:res.data.data[0].num,
            originprice:res.data.data[0].originprice
        },()=>{
            console.log(this.state.ordList[0].num);
        })
        // console.log(res.data.data[0].num*res.data.data[0].originprice);
        
        var res3 = await services.pro.pro_list({ count: 1, limitNum: 20 })
        this.setState({
            mainlist: res3.data.data
        })
        var res4 = await services.order.order_confirmOrder({ time: this.props.location.state.time, userid: localStorage.getItem('userid'), token: localStorage.getItem('token') })
    }
    render() {
        return (
            <div className='order'>
                <div className='dnavbar'>
                    <span onClick={() => { this.onClick() }}><LeftOutline /></span>
                    <div>确认订单</div>
                    <div className='dmicon'>
                        <MoreOutline />
                    </div>
                </div>
                <div style={{display:this.state.on}}>
                <div className="onaddress" onClick={() => { this.onAddress() }} >
                    <div className="onaddress_left">
                        <div className="onaddress_lefttrext" >
                            {this.props.location.state.Add}
                        </div>
                    </div>
                    <div className="onaddress_right">
                        <EnvironmentOutline />
                    </div>
                </div>
                </div>
                <div className="ordermain">
                    {
                        this.state.ordList == null ? <Empty description='没有新订单啦！' style={{height:'160px'}}/> : this.state.ordList.map((item, index) => {
                            return (
                                <div className="orderList" key={index}>
                                    <div className="orderList_left">
                                        <img src={item.img1} alt="" />
                                    </div>
                                    <div className="orderList_right">
                                        <div className="order_text">
                                            {item.proname}
                                        </div>
                                        <div className="order_bot">
                                            <div className="order_price">
                                                ￥{item.originprice}
                                            </div>
                                            <div className="order_num">
                                                {item.num}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>
                <div className="div" style={{ display: this.state.isshow }}>
                    <div className="shopcartguess_like"  >
                        猜你想要
                    </div>
                    <div className='main' >
                        {
                            this.state.mainlist.map((item, index) => {
                                return (
                                    <div className="mainboxl" key={index} onClick={() => { this.onClickxiangqin(item) }}>
                                        <div className="img">
                                            <img src={item.img2} alt="" />
                                        </div>
                                        <div className="xia">
                                            <div className="categroy">{item.proname}</div>
                                            <div className="priodd">￥{item.originprice}</div>
                                        </div>

                                    </div>
                                )
                            })
                        }
                    </div>
                </div>
                <div style={{display:this.state.on}}>

                <div className="orderc_bottom" >
                    <div className="orderc_bottom_radio" onClick={() => { this.onClickheji() }}>
                        合计
                    </div>
                    <div className="orderc_bottom_right">
                        <div className="orderc_bottom_money">
                            ￥{Number(this.state.num)*Number(this.state.originprice)}
                        </div>
                        <div className="orderc_bottom_order" onClick={() => { this.onpay() }}>
                            支付
                        </div>
                    </div>
                </div>
                </div>

            </div>
        );
    }
}

export default Order;